import type { FormSchemaGetter, VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { VbenIcon } from '@vben/icons';

import { z } from '#/adapter/form';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'projectName',
    label: '项目名称 ',
  },
];

export const columns: VxeGridProps['columns'] = [
  {
    title: '项目名称',
    field: 'projectName',
    treeNode: true,
    width: 200,
  },
  {
    title: '图标',
    field: 'projectImg',
    width: 80,
    slots: {
      default: ({ row }) => {
        return (
          <span class={'flex justify-center'}>
            <VbenIcon icon={row.projectImg} />
          </span>
        );
      },
    },
  },
  {
    title: '排序',
    field: 'sortNum',
    width: 120,
  },

  {
    title: '跳转路径',
    field: 'frontForwardUrl',
  },

  {
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    title: '操作',
    resizable: false,
    width: 'auto',
  },
];

export const drawerSchema = (
  handleUpload: (file: File) => void,
  handleRemove: () => void,
  handleUploadDetail: (file: File) => void,
  handleRemoveDetail: () => void,
  handleTreeChange: (value: number) => void,
): VbenFormSchema[] => [
  {
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
    fieldName: 'id',
  },
  {
    component: 'TreeSelect',
    defaultValue: 0,
    fieldName: 'parentId',
    label: '上级项目',
    rules: 'selectRequired',
    componentProps: {
      onChange: (value: number) => {
        handleTreeChange(value);
      },
    },
  },
  {
    component: 'Upload',
    componentProps: {
      // 更多属性见：https://ant.design/components/upload-cn
      accept: '.png,.jpg,.jpeg',
      disabled: false,
      maxCount: 1,
      multiple: false,
      showUploadList: true,
      // 上传列表的内建样式，支持四种基本样式 text, picture, picture-card 和 picture-circle
      listType: 'picture-card',
      beforeUpload: (file: File) => {
        console.log('file :>>', file);
        handleUpload(file);
        return false;
      },
      onRemove: (_file: File) => {
        handleRemove();
      },
    },
    fieldName: 'projectImg',
    label: '项目图片',
    renderComponentContent: () => {
      return {
        default: () => '上传图片',
      };
    },
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'projectName',
    label: '项目名称',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    fieldName: 'projectPrice',
    label: '项目价格',
    componentProps: {
      min: 0,
      precision: 2,
      placeholder: '请输入项目价格',
    },
    rules: z.number().min(0, { message: '项目价格不能小于0' }),
    dependencies: {
      show: (formValues) => formValues.parentId !== 0,
      triggerFields: ['parentId'],
    },
  },

  {
    component: 'Input',
    fieldName: 'frontForwardUrl',
    label: '跳转路径',
    dependencies: {
      show: (formValues) => formValues.parentId === 0,
      triggerFields: ['parentId'],
    },
  },
  {
    component: 'InputNumber',
    fieldName: 'sortNum',
    help: '排序, 数字越小越靠前',
    label: '显示排序',
    defaultValue: 0,
    rules: 'required',
  },
  {
    component: 'Upload',
    componentProps: {
      // 更多属性见：https://ant.design/components/upload-cn
      accept: '.png,.jpg,.jpeg',
      disabled: false,
      maxCount: 10,
      multiple: true,
      showUploadList: true,
      // 上传列表的内建样式，支持四种基本样式 text, picture, picture-card 和 picture-circle
      listType: 'picture-card',
      beforeUpload: (file: File) => {
        console.log('file :>>', file);
        handleUploadDetail(file);
        return false;
      },
      onRemove: (_file: File) => {
        handleRemoveDetail();
      },
    },
    fieldName: 'projectDetailImgList',
    label: '项目详情图片',
    renderComponentContent: () => {
      return {
        default: () => '上传图片',
      };
    },
    dependencies: {
      show: (formValues) => formValues.parentId !== 0,
      triggerFields: ['parentId'],
    },
    rules: 'required',
  },
];
